<template>
  <div>
    <Transition name="abcd" mode="in-out">
      <button v-if="docState === 'saved'" @click="docState = 'edited'">
        Edit
      </button>
      <button v-else-if="docState === 'edited'" @click="docState = 'editing'">
        Save
      </button>
      <button v-else-if="docState === 'editing'" @click="docState = 'saved'">
        Cancel
      </button>
    </Transition>

    <hr />
    <Hello />

    <World />

    <hr />

    <button @click="show = !show">Toggle</button>
    <button @click="aniName = 'abcd'">{{ aniName }}</button>

    <hr />

    <!-- 
      使用 Transition 组件包裹住需要实现动画或过渡的单个元素。结合一些类名来控制效果

        v-enter-from
        v-enter-to
        v-enter-active

        v-leave-from
        v-leave-to
        v-leave-active

     -->
    <Transition>
      <div v-if="show" class="box"></div>
    </Transition>

    <!-- 
      Transition 设置 name 属性，可以让默认6个类名的 v 修改成功 name 的值

        height-enter-from
        height-enter-to
        height-enter-active

        height-leave-from
        height-leave-to
        height-leave-active

     -->
    <hr />
    <Transition :name="aniName">
      <div v-if="show" class="box"></div>
    </Transition>
  </div>
</template>

<script>
import Hello from "./components/Hello.vue";
import World from "./components/World.vue";

export default {
  name: "App",

  components: {
    Hello,
    World,
  },

  data() {
    return {
      docState: "saved",
      show: true,
      aniName: "height",
    };
  },
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-enter-active,
.v-leave-active {
  transition: opacity 3s ease;
}

.height-leave-to,
.height-enter-from {
  height: 0;
}

.height-leave-active,
.height-enter-active {
  transition: height 3s linear;
}

.abcd-enter-active,
.abcd-leave-active {
  transition: all 0.25s ease-out;
}

.abcd-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.abcd-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}
</style>
